This section mentions code from Portal Extension Example from the GateIn Portal Quickstarts collection.
When creating a custom skin for a built-in portlet distributed with GateIn Portal, the same guidelines apply as when creating a new portlet skin: Firstly, you need to declare the skin in gatein-resources.xml file and secondly, you need to create the CSS (and eventually also images for backgrounds, etc.).
Note that shadowing of built-in portlet skins is controlled by the order of <dependencies> in the configuration of the Portal Container (or Extension) as described in the Portal Extension section. Namely, when a skin applicable to the same portlet, in our case HomePagePortlet defined in web.war, is available in more than one of the dependencies, the one from the context closest to the end of the list of dependencies is chosen. To ensure that the skin available in gatein-portal-extension will be chosen, we have added gatein-portal-extension as the last element of the list.
gatein-resources.xml
In our case gatein-resources.xml is located in the war/src/main/webapp/WEB-INF subfolder of Portal Extension quickstart project.
gatein-resources.xml
18. <gatein-resources xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
19. xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_resources_1_3 http://www.gatein.org/xml/ns/gatein_resources_1_3"
20. xmlns="http://www.gatein.org/xml/ns/gatein_resources_1_3">
21.
22. <!-- GateIn will load this CSS for HomePagePortlet instead of the default one. -->
23. <portlet-skin>
24. <!--
25. The name of the web application containing the portlet.xml file in which
26. BannerPortlet is definded. The application name is usually the same as
27. the name of the WAR through which the application was deployed.
28. -->
29. <application-name>web</application-name>
30. <!-- <portlet-name> value from the portlet.xml referenced above -->
31. <portlet-name>HomePagePortlet</portlet-name>
32. <skin-name>Default</skin-name>
33. <css-path>/templates/skin/webui/component/UIHomePagePortlet/DefaultStylesheet.css</css-path>
34. </portlet-skin>
CSS and Images
In the above gatein-resources.xml we have declared that our custom skin should use the CSS file /templates/skin/webui/component/UIHomePagePortlet/DefaultStylesheet.css which translates to war/src/main/webapp/templates/skin/webui/component/UIHomePagePortlet/DefaultStylesheet.css of Portal Extension quickstart project.
In the CSS file itself, we refer to image files using relative paths, such as the following:
DefaultStylesheet.css
051. .UIHomePagePortlet .TRContainer .DotLine {
052. background: url("DefaultSkin/background/Line.gif") no-repeat -2px top;
053. height: 1px;
054. width: 182px;
055. margin: 7px auto;
056. }